<template>
  <div>
    <ZgDialog width="80%" v-model="visible" title="选择数据" @ok="onOk">
      <ZgNewPage
        ref="page"
        title="用户列表"
        :extraHeight="400"
        :pageOpt="pageOpt"
        :openCondition="true"
        :conditions="conditions"
        :columnCol="8"
        :dataBtns="dataBtns"
        @search="onSearch"
        @condition="onSearchWithCondition">
        <template slot="columns">
          <a-table-column
            v-for="(h,i) in headers"
            :key="`column${i}`"
            :width="h.width===0 ? 'auto' : h.width"
            :title="h.label">
            <template slot-scope="record">
              {{ record[h.code] }}
            </template>
          </a-table-column>
        </template>
      </ZgNewPage>
    </ZgDialog>
    <ZgButton
      type="dashed"
      style="width:100%;margin-bottom:10px;"
      icon="search"
      @click="visible=true">
      选择数据
    </ZgButton>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      pageOpt: {
        showSearchBtn: true,
        showRefreshBtn: true,
        showConditionBtn: false,
        showDataCheck: true,
        showPageTitle: false
      },
      headers: [
        { code: 'name', label: '姓名', width: 0, isShow: true, sort: 0 },
        { code: 'sex', label: '性别', width: 0, isShow: true, sort: 0 },
        { code: 'age', label: '年龄', width: 0, isShow: true, sort: 0 }
      ],
      conditions: [
        { code: 'select', compType: '下拉选择', label: '性别', defaultVal: '', extra: { 下拉选项: [{ value: '1', label: '男111s' }, { value: '2', label: '女' }] } },
        { code: 'birth', compType: '日期区间', label: '生日', defaultVal: ['', ''] },
        { code: 'age', compType: '整数区间', label: '年龄', defaultVal: [0, 100] },
        { code: 'birth1', compType: '日期', label: '生日1', defaultVal: '2025-05-23' },
        { code: 'age1', compType: '整数', label: '年龄1', defaultVal: 0 },
        { code: 'name', compType: '单行文本', label: '姓名', defaultVal: '' },
        { code: 'political', compType: '字典', label: '政治面貌', defaultVal: '', extra: { 字典类型: 'political' } },
        { code: 'is_use', compType: '布尔', label: '启用1', defaultVal: 'false' }
      ],
      dataBtns: [
        { key: 1, name: '删除', type: 'primary', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', type: 'link', icon: 'fa-pencil', isShow: () => { return true } },
        { key: 3, name: '附件', type: 'link', icon: 'fa-file', isShow: () => { return true } }
      ]
    }
  },
  methods: {
    onSearch (param) {
      alert(JSON.stringify(param))
      // 加载表头
      const list = [
        { key: '1', id: '1', name: 'haha', sex: '男', age: 18, isUse: true },
        { key: '2', id: '2', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '3', id: '3', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '4', id: '4', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '5', id: '5', name: 'zxb', sex: '男', age: 18, isUse: true }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    onSearchWithCondition (condition) {
      alert(JSON.stringify(condition))
    },
    onOk () {
      this.$refs.page.checkIds(ids => {
        const list = this.$refs.page.getList()
        const result = list.filter(t => {
          return ids.includes(t.id)
        }).map(t => {
          return {
            id: t.id,
            name: t.name
          }
        })
        this.visible = false
        alert(JSON.stringify(result))
      }, '确定要选择这些用户么')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
